import { useState, useEffect } from 'react'
import Taro, { getCurrentInstance } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import { AtButton, AtModal } from 'taro-ui'
import './index.scss'

import QRCode from 'qrcode'

const Details = props => {
  const [info, setInfo] = useState(null)
  const [isOpened, setIsOpened] = useState(false)
  const [qrUrl, setQrUrl] = useState('')
  
  console.log('props', props)

  // 获取二维码
  const generateQR = text => {
    QRCode.toDataURL(text, { width: 200, height: 200 }, (err, url) => {
      if (err) throw err
      console.log('setQrUrl', url)
      setQrUrl(url)
    })
  }

  useEffect(() => {
    const { id } = getCurrentInstance().router.params
    console.log('params', id)
    generateQR('lao杨 No.1')
    return () => {}
  }, [])

  // 点击取消预约
  const cancelAppointment = () => {
    setIsOpened(false)
    Taro.showToast({
      title: '取消成功',
      icon: 'success',
      mask: true,
      duration: 2000,
    })
    setTimeout(() => {
      Taro.navigateBack()
    }, 2000)
  }

  return (
    <View className='details'>
      <View className=''>
        <View className=''> 26楼展示厅</View>
        <View className=''>
          <View className=''>预约时间：</View>
          <View className=''>2017-06-02</View>
          <View className=''>15:00-17:00</View>
        </View>
      </View>
      <View className=''>
        <View className=''>门禁密码</View>
        <View className=''>253345</View>
        <Image src={qrUrl} style='width: 200px; height: 200px;' />
        <View className=''>
          凭借电子密码或二维码进入功能室<br/>
          有效期截止预约的起始时间后30分钟
        </View>
      </View>
      
      <AtButton onClick={() => setIsOpened(true)}>
        取消预约
      </AtButton>

      {/* 弹出框 */}
      <AtModal
        isOpened={isOpened}
        title='提示'
        content='是否确定取消预约'
        cancelText='取消'
        confirmText='确认'
        onClose={() => setIsOpened(false)}
        onCancel={() => setIsOpened(false)}
        onConfirm={() => cancelAppointment()}
      />
    </View>
  )
}

export default Details
